<template>
  <div class="heroDetailCard">
    <h2 style="margin: 0 0 10px 0;text-align: center;">英雄节点信息</h2>
    <div class="img">
      <img :src="data.guide_pic" style="width: 100%;height: 100%;">
    </div>
    <div class="description">
      <el-row>
        <el-col :span="12"><span class="bold">中文名：</span>{{data.name}}、{{data.title}}</el-col>
        <el-col :span="12"><span class="bold">英文名：</span>{{data.alias}}</el-col>
        <el-col :span="24" style="word-wrap:break-word; word-break:break-all;"><span class="bold">相关关键词：</span>{{data.keywords}}</el-col>
      </el-row>
      <hr>
      <el-row v-if="attrData.length > 0">
        <el-col :span="12" :xs="24">
          <HeroAttributeEChart :data="attrData" />
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="audio">
            <div>
              <div class="audioText bold">禁用语音</div>
              <div>
                <audio :src="data.banAudio" controls></audio>
              </div>
            </div>
            <div>
              <div class="audioText bold">选择语音</div>
              <div>
                <audio :src="data.selectAudio" controls></audio>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import HeroAttributeEChart from './HeroAttributeEChart'
export default {
  name:"heroDetailCard",
  components: {
    HeroAttributeEChart
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  mounted() {
    this.processAttrData()
  },
  data() {
    return {
      lineType: ["attack", "defense", "magic", "difficulty"],
      attrData: []
    }
  },
  methods: {
    processAttrData() {
      this.attrData = []
      for(let key in this.lineType) {
        const value = this.data[this.lineType[key]]
        this.attrData.push(parseInt(value))
      }
    }
  }
}
</script>
<style scoped>
.heroDetailCard {
  width: 100%;
}
.description {
  font-size: 18px;
}
.bold {
  font-weight: 700;
}
.audio {
  height: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.audioText {
  margin-bottom: 10px;
}
</style>
